<template>
  <div id="game-grid">
    <grid-item
      v-for="item in grid"
      :key="item"
      :count="item.count"
      :is-bomb="item.isBomb"
      class="grid-item"
    >
      {{ item ? '💣' : '' }}
    </grid-item>
  </div>
</template>

<script lang="ts">
export default {
  name: 'BombPage',
};
</script>

<script setup lang="ts">
import { ref, computed } from 'vue';
import GridItem from './grid-item.vue';

const row = ref(10);
const column = ref(10);
const bombNumber = ref(10);

const total = computed(() => row.value * column.value);

const grid = computed(() => {
  let totalNumber = Array(total.value)
    .fill({ isBomb: false, count: 0 }, 0, 100)
    .fill({ isBomb: true, count: 1 }, 0, bombNumber.value)
    .sort(() => (Math.random() > 0.5 ? 1 : -1));
  console.log('totalNumber', totalNumber);
  return totalNumber;
});
</script>

<style scoped>
#game-grid {
  display: grid;
  grid-template-rows: repeat(10, 2rem);
  grid-template-columns: repeat(10, 2rem);
  grid-gap: 1px;
  justify-content: center;
}

.grid-item {
  background-color: #eee;
  border: 1px solid #fff;
  border-right-color: #ccc;
  border-bottom-color: #ddd;
  border-left-color: #eee;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 2px;
}
</style>
